<template>
  <div class="publish">
    <nav>
      <div class="right" @click="gotopublish">&lt;</div>
      <div class="text">发表文字</div>
      <div class="btn">
        <button :class="value ? 'active' : ''" @click="gotopublish">发表</button>
      </div>
    </nav>
    <textarea
      name="text"
      v-model="value"
      id="text"
      placeholder="这一刻的想法……"
    ></textarea>
    <footer>
      <div class="list">
        <div class="left">
          <span class="place"></span>
          <div class="text">所在位置</div>
        </div>
        <div class="right">&gt;</div>
      </div>
      <div class="list">
        <div class="left">
          <span class="warn"></span>
          <div class="text">提醒谁看</div>
        </div>
        <div class="right">&gt;</div>
      </div>
      <div class="list">
        <div class="left">
          <span class="who"></span>
          <div class="text">谁可以看</div>
        </div>
        <div class="right">
          <span style="display: inline-block; margin-right: 5px">公开</span>
          <span>&gt;</span>
        </div>
      </div>
      <div class="list">
        <div class="left">
          <span class="QQ"></span>
          <!-- <div class="text">所在位置</div> -->
        </div>
        <!-- <div class="right">&gt;</div> -->
      </div>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  methods:{
    gotopublish(){
        this.$router.go(-1);
    }
  }
};
</script>
<style lang="scss" scoped>
.publish {
  width: 100vw;
  height: 100vh;
  background-color: #000;

  nav {
    display: flex;
    align-content: space-between;
    text-align: center;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;

    .right {
      flex: 0 0 15%;
    }
    .text {
      font-size: 15px;
      flex: 0 0 65%;
    }
    .btn {
      //   display: flex;
      flex: 0 0 20%;

      button {
        // flex: 0 0 55px;
        width: 50px;
        height: 30px;
        line-height: 20px;
        font-size: 12px;
        margin: auto;
        border: none;
        color: rgba(128, 128, 128, 0.801);
        background-color: rgba(128, 128, 128, 0.498);
        border-radius: 5px;
        // #05c160绿色

        &.active {
          background-color: #05c160;
          color: #666;
        }
      }
    }
  }

  textarea {
    width: 100%;
    height: 250px;
    box-sizing: border-box;
    border: none;
    background-color: #000;
    padding: 20px;
    color: #fff;
  }

  footer {
    width: 100%;

    .list {
      overflow: hidden;
      margin: auto;
      width: 90%;
      height: 50px;
      line-height: 50px;
      //   background-color: antiquewhite;
      border-top: 1px solid rgba(128, 128, 128, 0.498);

      .left {
        float: left;

        span {
          display: inline-block;
          width: 25px;
          height: 25px;
          vertical-align: text-bottom;
          margin: 0 15px;
        }
        .place {
          background-image: url("@/assets/image/publish/place.png");
          background-size: cover;
        }

        .warn {
          background-image: url("@/assets/image/publish/warn.png");
          background-size: cover;
        }

        .who {
          background-image: url("@/assets/image/publish/who.png");
          background-size: cover;
        }

        .QQ {
          background-image: url("@/assets/image/publish/QQ.png");
          background-size: cover;
        }

        .text {
          color: #fff;
          display: inline-block;
        }
      }
      .right {
        float: right;
        color: rgba(128, 128, 128, 0.801);
      }
    }
  }
}
</style>